<template>
  <div class="window">
    <div class="contact">
      <contact></contact>
    </div>
    <div class="chat">
      <chat :name="name"></chat>
    </div>
  </div>
</template>

<script>
import Contact from './children/Contact'
import Chat from './children/Chat'
import {apiAuth} from '@/properties/api.js'
import {mapMutations} from 'vuex'

export default {
  name: 'ChatRoom',
  components: {
    Contact,
    Chat
  },
  data () {
    return {
      ws: null,
      name: ''
    }
  },
  mounted () {
    this.handleSelfInfo()
  },
  methods: {
    ...mapMutations(['setUser', 'connect']),

    selfInfo (cbOk, cbErr) {
      this.$axios.get(apiAuth.selfInfo, null, cbOk, cbErr)
    },

    handleSelfInfo () {
      let $this = this
      $this.selfInfo(
        function (res) {
          $this.name = res.data.name
          console.log('设置姓名')
          $this.setUser(res.data)
          $this.connect(res.data.name)
        },
        function (err) {
          $this.$message.error(err.msg)
        }
      )
    }
  }
}
</script>

<style scoped>
.window {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}

.contact {
  flex: 0 0 400px;
  height: 100%;
  border-right: 1px solid #ccc;
}

.chat {
  flex: 1;
  height: 100%;
}
</style>
